{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script type=\"text/javascript\">window.PlotlyConfig = {MathJaxConfig: 'local'};</script><script type=\"text/javascript\">if (window.MathJax) {MathJax.Hub.Config({SVG: {font: \"STIX-Web\"}});}</script><script>requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min']},});if(!window._Plotly) {require(['plotly'],function(plotly) {window._Plotly=plotly;});}</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<script type=\"text/javascript\">window.PlotlyConfig = {MathJaxConfig: 'local'};</script><script type=\"text/javascript\">if (window.MathJax) {MathJax.Hub.Config({SVG: {font: \"STIX-Web\"}});}</script><script>requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min']},});if(!window._Plotly) {require(['plotly'],function(plotly) {window._Plotly=plotly;});}</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import plotly\n",
    "import plotly.graph_objs as go\n",
    "plotly.offline.init_notebook_mode(connected=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Base Chart (rotated)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "linkText": "Export to plot.ly",
        "plotlyServerURL": "https://plot.ly",
        "showLink": true
       },
       "data": [
        {
         "direction": "clockwise",
         "domain": {
          "x": [
           0,
           0.48
          ]
         },
         "hole": 0.4,
         "hoverinfo": "none",
         "labels": [
          "-",
          "0",
          "20",
          "40",
          "60",
          "80",
          "100"
         ],
         "marker": {
          "colors": [
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)"
          ],
          "line": {
           "width": 1
          }
         },
         "name": "Gauge",
         "rotation": 108,
         "showlegend": false,
         "textinfo": "label",
         "textposition": "outside",
         "type": "pie",
         "uid": "9314e280-d319-465e-abd2-1f379cfcf04d",
         "values": [
          40,
          10,
          10,
          10,
          10,
          10,
          10
         ]
        }
       ],
       "layout": {}
      },
      "text/html": [
       "<div id=\"6b2d8b90-b5ef-405f-a014-39ed2a8f4fac\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"6b2d8b90-b5ef-405f-a014-39ed2a8f4fac\", [{\"direction\": \"clockwise\", \"domain\": {\"x\": [0, 0.48]}, \"hole\": 0.4, \"hoverinfo\": \"none\", \"labels\": [\"-\", \"0\", \"20\", \"40\", \"60\", \"80\", \"100\"], \"marker\": {\"colors\": [\"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\"], \"line\": {\"width\": 1}}, \"name\": \"Gauge\", \"rotation\": 108, \"showlegend\": false, \"textinfo\": \"label\", \"textposition\": \"outside\", \"values\": [40, 10, 10, 10, 10, 10, 10], \"type\": \"pie\", \"uid\": \"2e5bcbe4-9ea5-4c49-ad3a-ef707f194531\"}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"6b2d8b90-b5ef-405f-a014-39ed2a8f4fac\"));});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"6b2d8b90-b5ef-405f-a014-39ed2a8f4fac\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"6b2d8b90-b5ef-405f-a014-39ed2a8f4fac\", [{\"direction\": \"clockwise\", \"domain\": {\"x\": [0, 0.48]}, \"hole\": 0.4, \"hoverinfo\": \"none\", \"labels\": [\"-\", \"0\", \"20\", \"40\", \"60\", \"80\", \"100\"], \"marker\": {\"colors\": [\"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\"], \"line\": {\"width\": 1}}, \"name\": \"Gauge\", \"rotation\": 108, \"showlegend\": false, \"textinfo\": \"label\", \"textposition\": \"outside\", \"values\": [40, 10, 10, 10, 10, 10, 10], \"type\": \"pie\", \"uid\": \"2e5bcbe4-9ea5-4c49-ad3a-ef707f194531\"}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"6b2d8b90-b5ef-405f-a014-39ed2a8f4fac\"));});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "base_chart = {\n",
    "    \"values\": [40, 10, 10, 10, 10, 10, 10],\n",
    "    \"labels\": [\"-\", \"0\", \"20\", \"40\", \"60\", \"80\", \"100\"],\n",
    "    \"domain\": {\"x\": [0, .48]},\n",
    "    \"marker\": {\n",
    "        \"colors\": [\n",
    "            'rgb(255, 255, 255)',\n",
    "            'rgb(255, 255, 255)',\n",
    "            'rgb(255, 255, 255)',\n",
    "            'rgb(255, 255, 255)',\n",
    "            'rgb(255, 255, 255)',\n",
    "            'rgb(255, 255, 255)',\n",
    "            'rgb(255, 255, 255)'\n",
    "        ],\n",
    "        \"line\": {\"width\": 1}\n",
    "    },\n",
    "    \"name\": \"Gauge\",\n",
    "    \"hole\": .4,\n",
    "    \"type\": \"pie\",\n",
    "    \"direction\": \"clockwise\",\n",
    "    \"rotation\": 108,\n",
    "    \"showlegend\": False,\n",
    "    \"hoverinfo\": \"none\",\n",
    "    \"textinfo\": \"label\",\n",
    "    \"textposition\": \"outside\"\n",
    "}\n",
    "plotly.offline.iplot([base_chart], filename='base-chart')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Meter Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "linkText": "Export to plot.ly",
        "plotlyServerURL": "https://plot.ly",
        "showLink": true
       },
       "data": [
        {
         "direction": "clockwise",
         "domain": {
          "x": [
           0,
           0.48
          ]
         },
         "hole": 0.4,
         "hoverinfo": "none",
         "labels": [
          "-",
          "0",
          "20",
          "40",
          "60",
          "80",
          "100"
         ],
         "marker": {
          "colors": [
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)"
          ],
          "line": {
           "width": 1
          }
         },
         "name": "Gauge",
         "rotation": 108,
         "showlegend": false,
         "textinfo": "label",
         "textposition": "outside",
         "type": "pie",
         "uid": "b3a3d58d-a66d-4fd7-9ce6-50158c5af41a",
         "values": [
          40,
          10,
          10,
          10,
          10,
          10,
          10
         ]
        },
        {
         "direction": "clockwise",
         "domain": {
          "x": [
           0,
           0.48
          ]
         },
         "hole": 0.3,
         "hoverinfo": "none",
         "labels": [
          "Log Level",
          "Debug",
          "Info",
          "Warn",
          "Error",
          "Fatal"
         ],
         "marker": {
          "colors": [
           "rgb(255, 255, 255)",
           "rgb(232,226,202)",
           "rgb(226,210,172)",
           "rgb(223,189,139)",
           "rgb(223,162,103)",
           "rgb(226,126,64)"
          ]
         },
         "name": "Gauge",
         "rotation": 90,
         "showlegend": false,
         "textinfo": "label",
         "textposition": "inside",
         "type": "pie",
         "uid": "617bc427-8534-4d48-a1b4-b369a8f85220",
         "values": [
          50,
          10,
          10,
          10,
          10,
          10
         ]
        }
       ],
       "layout": {}
      },
      "text/html": [
       "<div id=\"9b84e8f5-b150-4baa-b724-105d160c7bdf\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"9b84e8f5-b150-4baa-b724-105d160c7bdf\", [{\"direction\": \"clockwise\", \"domain\": {\"x\": [0, 0.48]}, \"hole\": 0.4, \"hoverinfo\": \"none\", \"labels\": [\"-\", \"0\", \"20\", \"40\", \"60\", \"80\", \"100\"], \"marker\": {\"colors\": [\"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\"], \"line\": {\"width\": 1}}, \"name\": \"Gauge\", \"rotation\": 108, \"showlegend\": false, \"textinfo\": \"label\", \"textposition\": \"outside\", \"values\": [40, 10, 10, 10, 10, 10, 10], \"type\": \"pie\", \"uid\": \"e5122671-391a-4536-a561-ee7ed410d972\"}, {\"direction\": \"clockwise\", \"domain\": {\"x\": [0, 0.48]}, \"hole\": 0.3, \"hoverinfo\": \"none\", \"labels\": [\"Log Level\", \"Debug\", \"Info\", \"Warn\", \"Error\", \"Fatal\"], \"marker\": {\"colors\": [\"rgb(255, 255, 255)\", \"rgb(232,226,202)\", \"rgb(226,210,172)\", \"rgb(223,189,139)\", \"rgb(223,162,103)\", \"rgb(226,126,64)\"]}, \"name\": \"Gauge\", \"rotation\": 90, \"showlegend\": false, \"textinfo\": \"label\", \"textposition\": \"inside\", \"values\": [50, 10, 10, 10, 10, 10], \"type\": \"pie\", \"uid\": \"d3d3c857-ac97-4414-b476-35186bfdadb0\"}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"9b84e8f5-b150-4baa-b724-105d160c7bdf\"));});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"9b84e8f5-b150-4baa-b724-105d160c7bdf\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"9b84e8f5-b150-4baa-b724-105d160c7bdf\", [{\"direction\": \"clockwise\", \"domain\": {\"x\": [0, 0.48]}, \"hole\": 0.4, \"hoverinfo\": \"none\", \"labels\": [\"-\", \"0\", \"20\", \"40\", \"60\", \"80\", \"100\"], \"marker\": {\"colors\": [\"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\"], \"line\": {\"width\": 1}}, \"name\": \"Gauge\", \"rotation\": 108, \"showlegend\": false, \"textinfo\": \"label\", \"textposition\": \"outside\", \"values\": [40, 10, 10, 10, 10, 10, 10], \"type\": \"pie\", \"uid\": \"e5122671-391a-4536-a561-ee7ed410d972\"}, {\"direction\": \"clockwise\", \"domain\": {\"x\": [0, 0.48]}, \"hole\": 0.3, \"hoverinfo\": \"none\", \"labels\": [\"Log Level\", \"Debug\", \"Info\", \"Warn\", \"Error\", \"Fatal\"], \"marker\": {\"colors\": [\"rgb(255, 255, 255)\", \"rgb(232,226,202)\", \"rgb(226,210,172)\", \"rgb(223,189,139)\", \"rgb(223,162,103)\", \"rgb(226,126,64)\"]}, \"name\": \"Gauge\", \"rotation\": 90, \"showlegend\": false, \"textinfo\": \"label\", \"textposition\": \"inside\", \"values\": [50, 10, 10, 10, 10, 10], \"type\": \"pie\", \"uid\": \"d3d3c857-ac97-4414-b476-35186bfdadb0\"}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"9b84e8f5-b150-4baa-b724-105d160c7bdf\"));});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "meter_chart = {\n",
    "    \"values\": [50, 10, 10, 10, 10, 10],\n",
    "    \"labels\": [\"Log Level\", \"Debug\", \"Info\", \"Warn\", \"Error\", \"Fatal\"],\n",
    "    \"marker\": {\n",
    "        'colors': [\n",
    "            'rgb(255, 255, 255)',\n",
    "            'rgb(232,226,202)',\n",
    "            'rgb(226,210,172)',\n",
    "            'rgb(223,189,139)',\n",
    "            'rgb(223,162,103)',\n",
    "            'rgb(226,126,64)'\n",
    "        ]\n",
    "    },\n",
    "    \"domain\": {\"x\": [0, 0.48]},\n",
    "    \"name\": \"Gauge\",\n",
    "    \"hole\": .3,\n",
    "    \"type\": \"pie\",\n",
    "    \"direction\": \"clockwise\",\n",
    "    \"rotation\": 90,\n",
    "    \"showlegend\": False,\n",
    "    \"textinfo\": \"label\",\n",
    "    \"textposition\": \"inside\",\n",
    "    \"hoverinfo\": \"none\"\n",
    "}\n",
    "plotly.offline.iplot([base_chart, meter_chart], filename='meter-chart')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Dial\n",
    "Now we need a dial to show the current position in the meter at a particular time.\n",
    "Plotly's path shape can be used for this. A nice explanation of SVG path is available here by Mozilla.\n",
    "We can use a filled triangle to create our Dial."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "linkText": "Export to plot.ly",
        "plotlyServerURL": "https://plot.ly",
        "showLink": true
       },
       "data": [
        {
         "direction": "clockwise",
         "domain": {
          "x": [
           0,
           0.48
          ]
         },
         "hole": 0.4,
         "hoverinfo": "none",
         "labels": [
          "-",
          "0",
          "20",
          "40",
          "60",
          "80",
          "100"
         ],
         "marker": {
          "colors": [
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)",
           "rgb(255, 255, 255)"
          ],
          "line": {
           "width": 0
          }
         },
         "name": "Gauge",
         "rotation": 108,
         "showlegend": false,
         "textinfo": "label",
         "textposition": "outside",
         "type": "pie",
         "uid": "4bccc003-235b-4dc3-a5db-41a088e56b18",
         "values": [
          40,
          10,
          10,
          10,
          10,
          10,
          10
         ]
        },
        {
         "direction": "clockwise",
         "domain": {
          "x": [
           0,
           0.48
          ]
         },
         "hole": 0.3,
         "hoverinfo": "none",
         "labels": [
          "Log Level",
          "Debug",
          "Info",
          "Warn",
          "Error",
          "Fatal"
         ],
         "marker": {
          "colors": [
           "rgb(255, 255, 255)",
           "rgb(232,226,202)",
           "rgb(226,210,172)",
           "rgb(223,189,139)",
           "rgb(223,162,103)",
           "rgb(226,126,64)"
          ]
         },
         "name": "Gauge",
         "rotation": 90,
         "showlegend": false,
         "textinfo": "label",
         "textposition": "inside",
         "type": "pie",
         "uid": "5394a1d0-4417-4c7c-8d51-5dc6555d7394",
         "values": [
          50,
          10,
          10,
          10,
          10,
          10
         ]
        }
       ],
       "layout": {
        "annotations": [
         {
          "showarrow": false,
          "text": "50",
          "x": 0.23,
          "xref": "paper",
          "y": 0.45,
          "yref": "paper"
         }
        ],
        "shapes": [
         {
          "fillcolor": "rgba(44, 160, 101, 0.5)",
          "line": {
           "width": 0.5
          },
          "path": "M 0.235 0.5 L 0.24 0.65 L 0.245 0.5 Z",
          "type": "path",
          "xref": "paper",
          "yref": "paper"
         }
        ],
        "xaxis": {
         "showgrid": false,
         "showticklabels": false,
         "zeroline": false
        },
        "yaxis": {
         "showgrid": false,
         "showticklabels": false,
         "zeroline": false
        }
       }
      },
      "text/html": [
       "<div id=\"6d407493-bb86-450f-8195-d5a7bd81cb6a\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"6d407493-bb86-450f-8195-d5a7bd81cb6a\", [{\"direction\": \"clockwise\", \"domain\": {\"x\": [0, 0.48]}, \"hole\": 0.4, \"hoverinfo\": \"none\", \"labels\": [\"-\", \"0\", \"20\", \"40\", \"60\", \"80\", \"100\"], \"marker\": {\"colors\": [\"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\"], \"line\": {\"width\": 0}}, \"name\": \"Gauge\", \"rotation\": 108, \"showlegend\": false, \"textinfo\": \"label\", \"textposition\": \"outside\", \"values\": [40, 10, 10, 10, 10, 10, 10], \"type\": \"pie\", \"uid\": \"edb4b844-80e3-4d77-8110-7cf8ad26cf74\"}, {\"direction\": \"clockwise\", \"domain\": {\"x\": [0, 0.48]}, \"hole\": 0.3, \"hoverinfo\": \"none\", \"labels\": [\"Log Level\", \"Debug\", \"Info\", \"Warn\", \"Error\", \"Fatal\"], \"marker\": {\"colors\": [\"rgb(255, 255, 255)\", \"rgb(232,226,202)\", \"rgb(226,210,172)\", \"rgb(223,189,139)\", \"rgb(223,162,103)\", \"rgb(226,126,64)\"]}, \"name\": \"Gauge\", \"rotation\": 90, \"showlegend\": false, \"textinfo\": \"label\", \"textposition\": \"inside\", \"values\": [50, 10, 10, 10, 10, 10], \"type\": \"pie\", \"uid\": \"f5d4292a-ef9d-4fd0-863a-aa8094a06ccb\"}], {\"annotations\": [{\"showarrow\": false, \"text\": \"50\", \"x\": 0.23, \"xref\": \"paper\", \"y\": 0.45, \"yref\": \"paper\"}], \"shapes\": [{\"fillcolor\": \"rgba(44, 160, 101, 0.5)\", \"line\": {\"width\": 0.5}, \"path\": \"M 0.235 0.5 L 0.24 0.65 L 0.245 0.5 Z\", \"type\": \"path\", \"xref\": \"paper\", \"yref\": \"paper\"}], \"xaxis\": {\"showgrid\": false, \"showticklabels\": false, \"zeroline\": false}, \"yaxis\": {\"showgrid\": false, \"showticklabels\": false, \"zeroline\": false}}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"6d407493-bb86-450f-8195-d5a7bd81cb6a\"));});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"6d407493-bb86-450f-8195-d5a7bd81cb6a\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"6d407493-bb86-450f-8195-d5a7bd81cb6a\", [{\"direction\": \"clockwise\", \"domain\": {\"x\": [0, 0.48]}, \"hole\": 0.4, \"hoverinfo\": \"none\", \"labels\": [\"-\", \"0\", \"20\", \"40\", \"60\", \"80\", \"100\"], \"marker\": {\"colors\": [\"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\", \"rgb(255, 255, 255)\"], \"line\": {\"width\": 0}}, \"name\": \"Gauge\", \"rotation\": 108, \"showlegend\": false, \"textinfo\": \"label\", \"textposition\": \"outside\", \"values\": [40, 10, 10, 10, 10, 10, 10], \"type\": \"pie\", \"uid\": \"edb4b844-80e3-4d77-8110-7cf8ad26cf74\"}, {\"direction\": \"clockwise\", \"domain\": {\"x\": [0, 0.48]}, \"hole\": 0.3, \"hoverinfo\": \"none\", \"labels\": [\"Log Level\", \"Debug\", \"Info\", \"Warn\", \"Error\", \"Fatal\"], \"marker\": {\"colors\": [\"rgb(255, 255, 255)\", \"rgb(232,226,202)\", \"rgb(226,210,172)\", \"rgb(223,189,139)\", \"rgb(223,162,103)\", \"rgb(226,126,64)\"]}, \"name\": \"Gauge\", \"rotation\": 90, \"showlegend\": false, \"textinfo\": \"label\", \"textposition\": \"inside\", \"values\": [50, 10, 10, 10, 10, 10], \"type\": \"pie\", \"uid\": \"f5d4292a-ef9d-4fd0-863a-aa8094a06ccb\"}], {\"annotations\": [{\"showarrow\": false, \"text\": \"50\", \"x\": 0.23, \"xref\": \"paper\", \"y\": 0.45, \"yref\": \"paper\"}], \"shapes\": [{\"fillcolor\": \"rgba(44, 160, 101, 0.5)\", \"line\": {\"width\": 0.5}, \"path\": \"M 0.235 0.5 L 0.24 0.65 L 0.245 0.5 Z\", \"type\": \"path\", \"xref\": \"paper\", \"yref\": \"paper\"}], \"xaxis\": {\"showgrid\": false, \"showticklabels\": false, \"zeroline\": false}, \"yaxis\": {\"showgrid\": false, \"showticklabels\": false, \"zeroline\": false}}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"6d407493-bb86-450f-8195-d5a7bd81cb6a\"));});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "layout = {\n",
    "    'xaxis': {\n",
    "        'showticklabels': False,\n",
    "        'showgrid': False,\n",
    "        'zeroline': False,\n",
    "    },\n",
    "    'yaxis': {\n",
    "        'showticklabels': False,\n",
    "        'showgrid': False,\n",
    "        'zeroline': False,\n",
    "    },\n",
    "    'shapes': [\n",
    "        {\n",
    "            'type': 'path',\n",
    "            'path': 'M 0.235 0.5 L 0.24 0.65 L 0.245 0.5 Z',\n",
    "            'fillcolor': 'rgba(44, 160, 101, 0.5)',\n",
    "            'line': {'width': 0.5},\n",
    "            'xref': 'paper',\n",
    "            'yref': 'paper'\n",
    "        }\n",
    "    ],\n",
    "    'annotations': [\n",
    "        {\n",
    "            'xref': 'paper',\n",
    "            'yref': 'paper',\n",
    "            'x': 0.23,\n",
    "            'y': 0.45,\n",
    "            'text': '50',\n",
    "            'showarrow': False\n",
    "        }\n",
    "    ]\n",
    "}\n",
    "\n",
    "# we don't want the boundary now\n",
    "base_chart['marker']['line']['width'] = 0\n",
    "fig = {\"data\": [base_chart, meter_chart], \"layout\": layout}\n",
    "plotly.offline.iplot(fig, filename='gauge-meter-chart')"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
